<template>
  <div class="">
    <h3>运营成本分类管理</h3>
    <hr />
    <div class="btn">
      <el-button type="primary" color="#999">
        运营成本分类
      </el-button>
  <el-button type="primary" @click="dialogFormVisible = true" color="#999">
    添加运营成本分类
  </el-button>
  <hr />
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="del" label="删除" width="180" />
    <el-table-column prop="update" label="修改" width="180" />
    <el-table-column prop="number" label="编号" />
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="status" label="状态" />
    <el-table-column label="操作" inline="true">
       <template #default="scope">
        <el-button type="primary"  color="#999">启用</el-button>
          <el-button type="primary" color="#999" class="right">禁用</el-button>
       </template>
      </el-table-column>
      
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="运营成本分类" width="600">
    <hr />
    <el-form :model="form">
      <el-form-item label="分类名称" width="80">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
        <hr/>
      <el-form-item label="分类排名" width="80">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分类状态">
        <el-button type="primary"  color="#999">启用</el-button>
          <el-button type="primary" color="#999" class="right">禁用</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false" color="#999">
         添加
        </el-button>
        <el-button @click="dialogFormVisible = false" color="#999">关闭</el-button>
    
      </span>
    </template>
  </el-dialog>
        </div>
      
  </div>
</template>

<script  lang="ts">
export default {
  name: '',
  data(){
return {
  tableData:[
    {
      del:'删除',
      update:'修改',
      number:'01',
      name:'工资',
      status:'启用',
    }
  ],
  dialogFormVisible:'',
  
  form:{},
}
  },
  methods:{
    handlecategory(){

    },
    handleadd(){

    }
  }
}
</script>

<style scoped lang="less">
hr{
  width: 100%;
}
</style>
